<!-- 折叠面板数据展示模式 -->
<template>
  <div>
    <el-collapse>
      <el-collapse-item
        v-for="item in data"
        :name="item.filename"
        :key="item.filepath"
      >
        <template #title>
          <div class="title">
            <img :src="Utils.getFileIcon(item.filename)" alt="" />
            <span class="name">{{ item.filename }}</span>
            <span class="path">{{ item.filepath }}</span>
          </div>
        </template>
        <div class="result">
          <div
            class="result-item"
            v-for="(result, index) in item.LineContents"
            v-html="result"
            :key="result"
            @click="gotoEditor(item, index)"
          />
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { Utils } from "../../../utils";
import { ISearchResultItem } from "../../../interface";
import { useEditorStore } from "../../../pinia/useEditorStore";
const editorStore = useEditorStore();
const { data } = defineProps<{ data: ISearchResultItem[] }>();

/**
 * 在编辑器中打开
 * VueRouter 无法接收 emit 事件，因此直接在此处 调用 pinia 进行传输
 * @param item
 * @param index
 */
function gotoEditor(item: ISearchResultItem, index: number) {
  // 获取文件路径 /src/index.js 这样才能调用 web ContainerAPI 打开文件，读取内容
  const { filepath } = item;
  const result = item.result[index];
  editorStore.setCurrentSearch({ filepath, result });
}
</script>

<style lang="css" scoped>
.title {
  user-select: none;
  width: 100%;
  overflow: hidden;
  height: 30px;
  display: flex;
  align-items: center;
}
.title img {
  height: 100%;
}
.title .path {
  margin-left: 10px;
  font-size: 12px;
  font-style: italic;
  color: #ccc;
  /* 文本超出隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.result {
  user-select: none;
}
.result-item {
  border-radius: 4px;
  width: calc(100% - 20px);
  text-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 4px 10px;
  padding: 0 4px;
  cursor: pointer;
}
.result-item:hover {
  background-color: var(--t-main-aside-hover-background-color);
}
:deep().el-collapse-item__content span {
  color: #e93a3a !important;
  background-color: var(--t-main-aside-hover-background-color);
}
:deep().el-collapse-item__header {
  height: 30px;
}
</style>
